<template>
  <div class="layout">
    <div class="breadcrumb">
      <!-- 面包屑 -->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="400px" class="carousel">
        <el-carousel-item class="item" v-for="item in BannerList" :key="item.id">
          <img class="img" v-img-lazy="item.imgUrl" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 分类列表 -->
    <div class="category">
      <div class="top">
        <h3>全部分类</h3>
        <div class="box">
          <div class="item" v-for="item in categoryData.children" :key="item.id">
            <router-link :to="`/category/sub/${item.id}`" @mouseover="hoveredItem = item.id"
             @mouseleave="hoveredItem = null">
              <div class="img">
                <img v-img-lazy="item.picture" :class="{ hovered: hoveredItem === item.id }" />
              </div>
              <p class="name" :class="{ hovered: hoveredItem === item.id }">{{ item.name }}</p>
            </router-link>
          </div>
        </div>
      </div>
      <div class="content" v-for="item in categoryData.children" :key="item.id">
        <div class="content_box">
          <h3>- {{ item.name }} -</h3>
          <div class="content_item">
            <div v-for="good in item.goods" :key="good.id">
              <GoodItem :goods="good" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useBanner } from './composables/useBanner'
import { useCategory } from './composables/useCategory'
import GoodItem from "@/views/Home/components/GoodItem.vue";
import { ref } from 'vue';

const { BannerList } = useBanner()
const { categoryData } = useCategory()
const hoveredItem = ref(null)

</script>

<style lang="scss" scoped>
.layout {
  .breadcrumb {
    margin: 10px 150px;
  }

  .block {
    margin: 0 auto;
    width: 1240px;
    height: 420px;

    .item {
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .category {
    h3 {
      font-size: 30px;
      padding: 15px 0;
      text-align: center;
    }

    .top {
      widows: 100%;
      height: 250px;
      background: white;

      .box {
        display: flex;
        justify-content: center;
        align-items: center;

        .item {
          margin: 20px 40px;

          .img {
            width: 120px;
            height: 120px;

            img {
              width: 100%;
              height: 100%;
              border-radius: 15px;
            }

            img.hovered {
              transform: translateY(-5px);
            }
          }

          .name {
            text-align: center;
            padding-top: 5px;
            font-size: 15px;
          }

          .name.hovered {
            color: #40e0d0;

          }
        }
      }
    }

    .content {
      .content_box {
        background: white;
        margin: 20px 0;

        .content_item {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
          padding-bottom: 10px;
          padding-left: 130px;
        }
      }
    }
  }
}
</style>